<template>

	<!-- 二级条件选择 -->
	<scroll-view scroll-x="true" class="tow_scroll" :scroll-with-animation="true" :scroll-left="scrollLeft">
		<view class="scroll_tags"
			:style="{color:current==index?'#ffffff':'#202020',background:current==index?bgColor:'#F5F5F5'}"
			v-for="(item,index) in tagsList" :key="index" @click="setTags(item,index)">
			{{item}}

		</view>
	</scroll-view>

</template>

<script>
	export default {
		props: {

			tagsList: {
				type: Array,
				default () {
					return []
				}
			},
			// 选中背景颜色
			bgColor: {
				type: String,
				default: '#FA436A',
			}

		},
		data() {
			return {
				// 滑动位置
				scrollLeft: 0,
				//  选择序列
				current: 0
			}
		},
		methods: {

			setTags(item, index) {

				this.current = index;

				let scrollLeft = index * 38;
				if (index <= 2) {
					scrollLeft = 0;
				}
				this.scrollLeft = scrollLeft

				this.$emit("tabChange", index);
			}

		}
	}
</script>


<style lang="scss" scoped>
	// 隐藏滚动条scrollbar
	.tow_scroll ::-webkit-scrollbar {

		display: none;
		background-color: transparent;

	}

	.tow_scroll {       //导航窗口
		height: 100upx;
		line-height: 100upx;   //
		padding: 0px 10upx;
		white-space: nowrap;
		background-color: gold;

		.scroll_tags {              //导航窗口里面的按键
			display: inline-block;
			background-color: #FFF8F5;
			color: #202020;
			height: 50upx;
			line-height: 50upx;
			padding: 0 25upx;
			text-align: center;
			font-size: 24upx;
			border-radius: 30upx;
			margin: 0 10upx;
		}
	}
</style>